<template>
  <div>
<van-tabs :active="active" v-on:change="onChange" id="tabs" swipeable class="custom-tab"> 
  <van-tab title="首页">内容 1</van-tab>
  <van-tab title="提问">内容 2</van-tab>
  <van-tab title="建议">内容 3</van-tab>
  <van-tab title="分享">内容 4</van-tab>
  <van-tab title="讨论">内容 5</van-tab>
  <van-tab title="公告">内容 6</van-tab>

</van-tabs>

 <v-tabbar :selected="selected"></v-tabbar>
  </div>
</template>

<script>
import Icon from '@/components/icon/index'
import Tabbar from '@/components/tabbar/vant'

export default {
  name: 'index',
  data () {
    return {
      selected: 0,
      active: 0
    }
  },
  components: {
    'v-icon': Icon,
    'v-tabbar': Tabbar
  },
  onShow () {
    this.$root.$mp.page.selectComponent('#tabs').resize() // 这个主要是针对mpvue框架
  },
  methods: {
    onChange (event) {
      // wx.showToast({
      //   title: `点击标签 ${event.detail.name}`,
      //   icon: 'none'
      // })
      wx.showToast({
        title: `切换到标签 ${event.mp.detail.index}${event.mp.detail.name}`,
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
//自定义主题
.custom-tab {
  --tabs-bottom-bar-color: #02d199;
  --tab-active-text-color: #02d199;
  --tab-text-color: #666666;
}
</style>
